import React from 'react';
import classNames from 'classnames';
import { Tooltip } from 'antd';
import { QuestionCircleOutlined } from '@ant-design/icons';
import type { CSSProperties } from 'react';
import type { Argument } from 'classnames';
import './index.less';

const defaultProps = {
  color: 'rgb(253, 79, 67)',
};

const TjTableTitleTips: React.FC<ITjTableTitleTipsProps> = (props) => {
  return (
    <div style={props.style} className={classNames('tj-table-title-tips', props.className)}>
      {props.title}
      {props.tips && (
        <Tooltip placement="top" title={props.tips || ''}>
          <span className="icon" style={{ color: props.color ? props.color : defaultProps.color }}>
            <QuestionCircleOutlined />
          </span>
        </Tooltip>
      )}
    </div>
  );
};

interface ITjTableTitleTipsProps {
  /**
   * 支持传入行内样式
   */
  style?: CSSProperties;
  /**
   * class
   * 不管传没传，都会有一个 `tj-filter` 的 className
   */
  className?: Argument;
  /**
   *
   * 列表标题
   */
  title: string;
  /**
   *
   * 鼠标移入后显示的tips
   */
  tips?: string;
  /**
   * 提示信息颜色
   */
  color?: string;
}

export { TjTableTitleTips };
